import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import numStatus from '../../store/num'
import Bar from '../../components/echarts/bar'
import Pie from '../../components/echarts/pie'
import Line from '../../components/echarts/line'
import StackedAreaChart from '../../components/echarts/dareachart'
import KLineChart from '../../components/echarts/kline'
import LineBarChart from '../../components/echarts/linetchart'
import InfoCard from './InfoCard'
import CollapseNotice from './CollapseNotice'
import { Card, Col, Row } from 'antd';

export default function User() {
  let { num, arr } = useSelector((state: RootState) => ({
    num: state.numStatus.num,
    arr: state.arrStatus.arrData,
  }))
  let dispatch: any = useDispatch()

  const setNum = () => {
    dispatch({ type: 'add1', val: 10 })
  }
  // 异步增加十
  const setNum10 = () => {
    dispatch(numStatus.asyncActions.asyncAdd10)
  }
  const setArr = () => {
    dispatch({ type: 'arrPush', val: '吃饭' })
  }

  const title = '商品销售列表';
  const data = [
    { name: '衬衫', value: 5 },
    { name: '羊毛衫', value: 20 },
    { name: '雪纺衫', value: 36 },
    { name: '裤子', value: 10 },
    { name: '高跟鞋', value: 10 },
    { name: '袜子', value: 20 }
  ];
  const style = { width: '500px', height: '500px' };

  const xData = ['衬衫', '羊毛衫', '雪纺衫', '高跟鞋'];
  const yData = [220, 182, 191, 234, 290, 330];

  const kdata = [
    [2320.26, 2302.6, 2287.3, 2362.94],
    [2300, 2291.3, 2288.26, 2308.38],
    [2295.35, 2346.5, 2295.35, 2345.92],
    // 更多的数据项...
  ];

  const ktimeData = ['2023-12-01', '2023-12-02', '2023-12-03', '2023-12-04'];

  return (
    <>
    <InfoCard/>
<div style={{ display: 'flex', flexWrap: 'wrap' }}>



  <Card title="系统公告" bordered={false} style={{ width: 500 }}>
     <CollapseNotice/>
  </Card>

    <Line title={title} xData={xData} yData={yData} style={style} />

    {/* 使用Bar组件 */}
    <Bar
      title={title}
      xData={['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']}
      yData={[5, 20, 36, 10, 10, 20]}
      style={{ width: '500px', height: '500px' }} />
 
      <StackedAreaChart 
        xdata={xData}
        title={title}
        data={data} 
        style={style} />
    <Pie title={title} data={data} style={style} />

    <LineBarChart style={style} title="K线图" data={kdata} xdata={ktimeData} />
    <KLineChart style={style} title="K线图" data={kdata} xdata={ktimeData} /> 
  </div>
  </>
  )
}
